<div class="box">
    <div class="box-header">
        <h3 class="box-title">Case custom fields ({{$vm.customFields.length}})</h3>
    </div>
    <div class="box-body">

        <button class="btn btn-sm btn-primary" type="button" ng-click="$vm.showFieldDialog({})">Add custom field</button>

        <div class="row mt-xs">
            <div class="col-md-12" ng-if="$vm.customFields.length === 0">
                <div class="empty-message">No custom fields defined yet</div>
            </div>
            <div class="col-md-12" ng-if="$vm.customFields.length !== 0">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th width="80">Type <a ng-click="$vm.sortBy('type')"><i class="fa fa-sort" ng-class="{'fa-sort-up': $vm.state.sort==='type' && !$vm.state.asc, 'fa-sort-down': $vm.state.sort==='type' && $vm.state.asc}"></i></a></th>
                            <th width="250">Name <a ng-click="$vm.sortBy('name')"><i class="fa fa-sort" ng-class="{'fa-sort-up': $vm.state.sort==='name' && !$vm.state.asc, 'fa-sort-down': $vm.state.sort==='name' && $vm.state.asc}"></i></a></th>
                            <th width="250">Internal Reference <a ng-click="$vm.sortBy('reference')"><i class="fa fa-sort" ng-class="{'fa-sort-up': $vm.state.sort==='reference' && !$vm.state.asc, 'fa-sort-down': $vm.state.sort==='reference' && $vm.state.asc}"></i></a></th>
                            <th>Description</th>
                            <th width="100" class="text-center">Mandatory</th>
                            <th width="200">Options</th>
                            <th width="160" class="text-center">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="field in $vm.customFields | orderBy:$vm.state.sort:!$vm.state.asc">
                            <td align="center">
                                <span class="label label-default">{{field.type | uppercase}}</span>
                            </td>
                            <td><a href ng-click="$vm.showFieldDialog(field)">{{field.name}}</a></td>
                            <td>{{field.reference}}</td>
                            <td>{{field.description || 'N/A'}}</td>
                            <td align="center">{{field.mandatory === true ? 'Yes': 'No'}}</td>
                            <td ng-if="field.options.length === 0">
                                <em>None</em>
                            </td>
                            <td ng-if="field.options.length > 0">
                                <ul class="list list-unstyled" ng-repeat="option in field.options track by $index">
                                    <li>{{option}}</li>
                                </ul>
                            </td>
                            <td align="center">
                                <button class="btn btn-xs btn-primary" ng-click="$vm.showFieldDialog(field)"><i class="fa fa-pencil"></i> Edit</button>
                                <button class="btn btn-xs btn-danger" ng-click="$vm.deleteField(field)"><i class="fa fa-trash"></i> Delete</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

        </div>

        <div class="vpad10"></div>

    </div>
</div>
